//单据细节
<template>
    <div>
      <el-page-header @back="back()" content="单据详情页面" style="margin-bottom: 10px;"/>
      <el-row :gutter="20" type="flex" justify="start">
        <el-col :span="8"><div class="grid-content bg-purple">进货单编号:{{info.receipt_no}}</div></el-col>
      </el-row>
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="8"><div class="grid-content bg-purple">供货商:{{info.supplier}}</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">供货商地址</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">日期:{{info.date}}</div></el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-table
              :data="receipt.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              border
              show-summary
              :summary-method="getSumNum"
              style="width: 85vw;background-color: #ffff00;top: 0px">
              <el-table-column
                label="商品名称"
                class-name="name"
                align="center"
                prop="good_name">
              </el-table-column>
              <el-table-column
                label="商品条码"
                align="center"
                class-name="barcode"
                prop="barcode">
              </el-table-column>
              <el-table-column
                label="进价"
                class-name="cost"
                align="center"
                prop="cost">
              </el-table-column>
              <el-table-column
                label="数量"
                class-name="num"
                align="center"
                prop="num">
              </el-table-column>
              <el-table-column
                label="总额"
                class-name="total"
                align="center"
                prop="totalcost">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="receipt.length">
        </el-pagination>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="8"><div class="grid-content bg-purple">进货单位</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">进货地址</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">负责人:{{ info.staff }}</div></el-col>
      </el-row>
    </div>
</template>

<script>
    import {loadReceiptDetail,loadReceiptInfo} from "../../../services/purchaseService";

    export default {
        name: "ReceiptDetail",
      data(){
          return{
            receipt:[],
            currentPage:1, //初始页
            pagesize:5,    //    每页的数据
            info:{
              receipt_no:'',
              date:'',
              totalcost:'',
              supplier:'',
              staff:'',
            }
          }
      },
      mounted() {
        this.loadReceipt();
      },
      methods:{
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },
          back(){
            this.$router.back();
          },
        //加载单据细节
        loadReceipt(){
          this.info.receipt_no=this.$route.query.receipt_no
          loadReceiptInfo(this.info.receipt_no).then(success=>{
            this.info=success.data;
            console.log(JSON.stringify(this.info))
          })
          loadReceiptDetail(this.info.receipt_no).then(success=>{
            this.receipt=success.data;
          })
        },
        getSumNum(param){
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '合计';
              return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              if(column.className=='num' || column.className=='total'){
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
              }
            } else {
              sums[index] = 'N/A';
            }
          });

          return sums;
        },
      },

    }
</script>

<style scoped>
.grid-content {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
}
.bg-purple {
  background: #d3dce6;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
</style>
